<template>
	<div>
	  <el-button :type="xinxi1S" size="mini" @click="clickXinxi1"
		>信息1</el-button
	  >
	  <el-button :type="xinxi2S" size="mini" @click="clickXinxi2"
		>信息2</el-button
	  >
	  <div id="main" style="width: 800px; height: 600px"></div>
	</div>
  </template>
   
  <script>
  import * as echarts from 'echarts'
  import {getlouverIlluminationList} from '@/api/system/temp'
  export default {
	data() {
	  return {
		data: null,
		title: '',
		xAxis: [],
		series: [],
		xinxi1S: '',
		xinxi2S: '',
		name1: '',
		name2: '',
		chartsDom: null, //定义全局变量
		date:'2022/11/9'
	  }
	},
	mounted() {
	  this.getData() //获取默认加载的数据
	  this.clickXinxi1() //将默认获取的数据显示到echarts图表中
	},
	methods: {
	  clickXinxi1() {
		this.xinxi1S = 'primary'
		this.xinxi2S = ''
		this.title = '笔记本销售情况'
		this.xAxis = [
		  '00:00',
		  '02:00',
		  '04:00',
		  '06:00',
		  '08:00',
		  '10:00',
		  '12:00',
		  '16:00',
		  '18:00',
		  '20:00',
		]
		this.series = [
		  {
			name: this.name1,
			type: 'line',
			data: [1, 3, 9, 27, 22, 33, 33, 44, 32, 43, 21],
		  },
		  {
			name: this.name2,
			type: 'line',
			data: [1, 2, 4, 8, 16, 32, 23, 25, 34, 27, 11],
		  },
		]
		this.draw()
	  },
	  clickXinxi2() {
		this.xinxi1S = ''
		this.xinxi2S = 'primary'
		this.title = '信息2'
		this.series = [
		  {
			name: this.name1,
			type: 'line',
			data: [1, 3, 9],
		  },
		  {
			name: this.name2,
			type: 'line',
			data: [1, 2, 4, 27, 11],
		  },
		]
		this.draw()
	  },
	  draw() {
		if (
		  //判断是否存在echarts实例化对象,如果存在则销毁
		  this.chartsDom != null &&
		  this.chartsDom != '' &&
		  this.chartsDom != undefined
		) {
		  this.chartsDom.dispose()
		}
		var chartDom = document.getElementById('main')
		this.chartsDom = echarts.init(chartDom) //创建echarts实例化对象
		this.chartsDom.clear() //清空画布数据
		this.chartsDom.setOption(this.option()) //设置对应的参数,标题,x轴,y轴坐标,以及显示的数据
	  },
	  option() {
		var option = {
		  title: {
			text: this.title,
			left: 'center',
		  },
		  tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c}',
		  },
		  legend: {
			left: 'left',
		  },
		  xAxis: {
			type: 'category',
			name: 'x',
			splitLine: { show: false },
			data: this.xAxis,
		  },
		  grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true,
		  },
		  yAxis: {
			type: 'value',
			name: 'y',
			minorSplitLine: {
			  show: true,
			},
		  },
		  series: this.series,
		}
		return option
	  },
	  getData() {
		getlouverIlluminationList(this.date).then(res => {
		  console.log(res)
		  this.name1 = res.data.newArrivalItems[0]
		  this.name2 = res.data.newArrivalItems[1]
		})
	  },
	},
  }
  </script>
   
  <style lang="scss" scoped></style>